<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>官网</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/main.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
    /* Custom Styles */
   img{
   	margin: 0;
   	padding: 0;
   }
   hr{
   	border-top: 4px solid darkslategray;
   }
   p{
   	font-size: 20px;
   }
    ul.nav-tabs{
        width: 95px;
        margin-top: 20px;
        border-radius: 4px;
        border: 1px solid #ddd;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    }
    ul.nav-tabs li{
        margin: 0;
        border-top: 1px solid #ddd;
    }
    ul.nav-tabs li:first-child{
        border-top: none;
    }
    ul.nav-tabs li a{
        margin: 0;
        padding: 8px 16px;
        border-radius: 0;
    }
    ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
        color: #fff;
        background: #0088cc;
        border: 1px solid #0088cc;
    }
    ul.nav-tabs li:first-child a{
        border-radius: 4px 4px 0 0;
    }
    ul.nav-tabs li:last-child a{
        border-radius: 0 0 4px 4px;
    }
    ul.nav-tabs.affix{
        top: 30px; /* Set the top position of pinned element */
    }
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy">
	<nav id="head" class="navbar navbar-default" role="navigation" style="background-color: #31B0D5;">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WangPan</a>
      <a class="navbar-brand" href="shouye.html">首页</a>
      <a class="navbar-brand">|</a>
     <!-- <a class="navbar-brand" href="shouye.html">动态</a>
      <a class="navbar-brand">|</a>
      <a class="navbar-brand" href="shouye.html">动态</a>
      <a class="navbar-brand">|</a>
      <a class="navbar-brand" href="shouye.html">动态</a> -->
      <div style="float: right;border: 2px black solid;background-color: #D6E9C6;">
      	<a class="navbar-brand" style="" href="index.html?iii=1" ><span class="glyphicon glyphicon-user">登录</a>
      	<a class="navbar-brand" style="" href="index.html?iii=0" onclick="login()"><span class="glyphicon glyphicon-plus">注册</a>   
      </div>
    </div>
  </div>
</nav>
<div id="index" class="container" >
    <div class="row">
        
        <div class="col-xs-10 col-lg-10">
        	<div id="myCarousel" class="carousel slide">
				<!-- 轮播（Carousel）指标 -->
				<ol class="carousel-indicators">
					<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
					<li data-target="#myCarousel" data-slide-to="1"></li>
					<li data-target="#myCarousel" data-slide-to="2"></li>
				</ol>   
				<!-- 轮播（Carousel）项目 -->
				<div class="carousel-inner">
					<div class="item active">
					<img src="images/20130704174743_t2Nij.jpg" alt="First slide">
					</div>
					<div class="item">
					<img src="images/6842469_134415653150_2.jpg" alt="Second slide">
					</div>
					<div class="item">
					<img src="images/6842469_134415653150_2.jpg" alt="Third slide">
					</div>
				</div>
				<!-- 轮播（Carousel）导航 -->
				<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
				    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				    <span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
				    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				    <span class="sr-only">Next</span>
				</a>
			</div>
			
			<hr />
			
            <h2 id="section-1">堆山积海</h2>
            <div class="row" style="text-align: center;">
			    <div class="col-sm-6 col-md-4 ol-xs-6">
			        <div class="thumbnail">
			            <img src="images/timg.jpg"
			                 alt="通用的占位符缩略图">
			            <div class="caption">
			                <h3>收藏家</h3>
			                <p>我没有收藏癖，我只想留下自己认为美好的东西</p>
            			</div>
			        </div>
			    </div>
			    <div class="col-sm-6 col-md-4 ol-xs-6">
			        <div class="thumbnail">
			            <img src="images/dian.png"
			                 alt="通用的占位符缩略图">
			            <div class="caption">
			                <h3>便捷高效</h3>
			                <p>我没有收藏癖，我只想留下自己认为美好的东西</p>
            			</div>
			        </div>
			    </div>
			    <div class="col-sm-6 col-md-4 ol-xs-6">
			        <div class="thumbnail">
			            <img src="images/dun.jpg"
			                 alt="通用的占位符缩略图">
			            <div class="caption">
			                <h3>有备无患</h3>
			                <p>虽然现在没用上，但不代表以后，何不将其安全保存</p>
            			</div>
			        </div>
			    </div>
			</div>
            
            <hr />
            
            <h2 id="section-2">有条不紊</h2>
            <div class="panel-group" id="accordion">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h4 class="panel-title">
							<a id="xiala" data-toggle="collapse" data-parent="#accordion" 
							   href="#collapseOne">
								<span class='glyphicon glyphicon-minus'></span>便签？学习笔记？账本？应有尽有
							</a>
						</h4>
					</div>
					<div id="collapseOne" class="panel-collapse collapse in myla">
						<div class="panel-body">
							有时候我们记下一个日期，或者一个电话号码，再或者一件要紧的事。如果我们忘记他了，有时候可真要命！
							<br />
							<br />
							<div class="row" style="text-align: center;">
								<div class="col-sm-6 col-md-3 col-xs-6" >
							        <div class="thumbnail">
							            <img src="images/beiwan.jpg"
							                 alt="通用的占位符缩略图">
							            <div class="caption" style="text-align: center;">
							                <h3>便签</h3>
				            			</div>
							        </div>
							    </div>
							    <div class="col-sm-6 col-md-3 col-xs-6">
							        <div class="thumbnail">
							            <img src="images/notobook.jpg"
							                 alt="通用的占位符缩略图">
							            <div class="caption">
							                <h3>学习笔记</h3>
				            			</div>
							        </div>
							    </div>
							    <div class="col-sm-6 col-md-3 col-xs-6">
							        <div class="thumbnail">
							            <img src="images/zhangben.jpg"
							                 alt="通用的占位符缩略图">
							            <div class="caption">
							                <h3>账本</h3>
				            			</div>
							        </div>
							    </div>
							    <div class="col-sm-6 col-md-3 col-xs-6">
							        <div class="thumbnail">
							            <img src="images/timg.jpg"
							                 alt="通用的占位符缩略图">
							            <div class="caption">
							                <h3>更多</h3>
				            			</div>
							        </div>
							    </div>
							</div>
						</div>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading">
						<h4 class="panel-title">
							<a id="xiala" data-toggle="collapse" data-parent="#accordion" 
							   href="#collapseTwo">
								<span class='glyphicon glyphicon-plus'></span>文件管理不麻烦
							</a>
						</h4>
					</div>
					<div id="collapseTwo" class="panel-collapse collapse myla">
						<div class="panel-body">
							信息时代的我们，难以避免和 file打交道，乱糟糟的文件一天天增多，没有的还留着，有用的没了，这一点都不好，是吧
							<br />
							<br />
							<div class="row" style="text-align: center;">
								<div class="col-sm-6 col-md-3 col-xs-6" >
							        <div class="thumbnail">
							            <img src="images/super.jpg"
							                 alt="通用的占位符缩略图">
							            <div class="caption" style="text-align: center;">
							                <h3>超级查询</h3>
							                <p>通过任一关键字段，查询你的一切</p>
				            			</div>
							        </div>
							    </div>
							    <div class="col-sm-6 col-md-3 col-xs-6">
							        <div class="thumbnail">
							            <img src="images/save.jpg"
							                 alt="通用的占位符缩略图">
							            <div class="caption">
							                <h3>智能备份</h3>
							                <p>回档回档，你的文件还可以抢救</p>
				            			</div>
							        </div>
							    </div>
							    <div class="col-sm-6 col-md-3 col-xs-6">
							        <div class="thumbnail">
							            <img src="images/log.jpg"
							                 alt="通用的占位符缩略图">
							            <div class="caption">
							                <h3>信息统计</h3>
							                <p>你干了什么，一目了然</p>
				            			</div>
							        </div>
							    </div>
							    <div class="col-sm-6 col-md-3 col-xs-6">
							        <div class="thumbnail">
							            <img src="images/timg.jpg"
							                 alt="通用的占位符缩略图">
							            <div class="caption">
							                <h3>更多</h3>
							                <p>尽请期待，欢迎您的建议</p>
				            			</div>
							        </div>
							    </div>
							    <div class="col-sm-6 col-md-3 col-xs-6">
							        <div class="thumbnail">
							            <img src="images/timg.jpg"
							                 alt="通用的占位符缩略图">
							            <div class="caption">
							                <h3>更多</h3>
							                <p>尽请期待，欢迎您的建议</p>
				            			</div>
							        </div>
							    </div>
							    <div class="col-sm-6 col-md-3 col-xs-6">
							        <div class="thumbnail">
							            <img src="images/timg.jpg"
							                 alt="通用的占位符缩略图">
							            <div class="caption">
							                <h3>更多</h3>
							                <p>尽请期待，欢迎您的建议</p>
				            			</div>
							        </div>
							    </div>
							    <div class="col-sm-6 col-md-3 col-xs-6">
							        <div class="thumbnail">
							            <img src="images/timg.jpg"
							                 alt="通用的占位符缩略图">
							            <div class="caption">
							                <h3>更多</h3>
							                <p>尽请期待，欢迎您的建议</p>
				            			</div>
							        </div>
							    </div>
							    <div class="col-sm-6 col-md-3 col-xs-6">
							        <div class="thumbnail">
							            <img src="images/timg.jpg"
							                 alt="通用的占位符缩略图">
							            <div class="caption">
							                <h3>更多</h3>
							                <p>尽请期待，欢迎您的建议</p>
				            			</div>
							        </div>
							    </div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<hr />
            
            <h2 id="section-3">东搜西罗</h2>
            <div style="width: 100%;overflow:hidden">
            	<div class="panel panel-info" style="width: 100%;float: left;margin-bottom: 0px;">
					<div class="panel-heading">
						<h3 class="panel-title">
							真正无欲无求的人，我是觉得不存在。
						</h3>
					</div>
					<div class="panel-body">
						<ul class="list-group">
							<li class="list-group-item">音乐专区</li>
							<li class="list-group-item">图片专区</li>
							<li class="list-group-item">文字专区</li>
							<li class="list-group-item">其他</li>
							<li class="list-group-item">
								<span class="badge">新</span>
								游戏专区
							</li>
							<li class="list-group-item">
								<span class="badge">新</span>
								应用专区
							</li>
						</ul>
					</div>
				</div>
				<div class="panel panel-info" style="width: 100%;float: right;margin-bottom: 0px;">
					<div class="panel-heading">
						<h3 class="panel-title">
							一些记忆碎片突然浮现，我现在真的很想找到它
						</h3>
					</div>
					<div class="panel-body">
						<div class="jumbotron">
							<div class="container">
								<h1 style="margin-bottom: 20px;">资源捞</h1>
								<div>
									<input type="text" class="form-control" placeholder="输入资源关键字" style="width: 60%;float: left;height: 50px;"/>
									<button class="btn btn-lg btn-default" type="button" style="margin-left: 20px;">搜索</button>
								</div>
							</div>
						</div>
					</div>
				</div>
            </div>
            
            <hr />
            
            <h2 id="section-4">分享共享</h2>
            <p>曾经，我想和你分享我所有的秘密，但现在，你成了我心底的秘密。</p>
            <p>通过让人们分享想要分享的内容，与想联系的人进行沟通，无论他们身在何方，我们力图实现这一点。</p>
            <p>人生因付出而快乐，幸福因分享而增值。幸福需要与人分享，否则内心就会像死海那样，水流只进不出，最终一片死寂。</p>
            <p>不管什么样子的好东西，都要跟人分享了才有趣吧。一个人再怎么精彩，也掩盖不了偶尔会泛起的孤单。不是一个人不行，只是感觉两个人一起更好。</p>
            
            <hr />
            
            <h2 id="section-5">娓娓而谈</h2>
            <p>你的资源真好，我们做朋友吧HHH</p>
            <p>Vivamus mattis accumsan erat, vel convallis risus pretium nec. Integer nunc nulla, viverra ut sem non, scelerisque vehicula arcu. Fusce bibendum convallis augue sit amet lobortis. Cras porta urna turpis, sodales lobortis purus adipiscing id. Maecenas ullamcorper, turpis suscipit pellentesque fringilla, massa lacus pulvinar mi, nec dignissim velit arcu eget purus. Nam at dapibus tellus, eget euismod nisl. Ut eget venenatis sapien. Vivamus vulputate varius mauris, vel varius nisl facilisis ac. Nulla aliquet justo a nibh ornare, eu congue neque rutrum.</p>
            <p>Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, fermentum lacus et, viverra tellus. Phasellus sodales libero nec dui convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh, quis varius libero.</p>
            <p>Morbi sed fermentum ipsum. Morbi a orci vulputate tortor ornare blandit a quis orci. Donec aliquam sodales gravida. In ut ullamcorper nisi, ac pretium velit. Vestibulum vitae lectus volutpat, consequat lorem sit amet, pulvinar tellus. In tincidunt vel leo eget pulvinar. Curabitur a eros non lacus malesuada aliquam. Praesent et tempus odio. Integer a quam nunc. In hac habitasse platea dictumst. Aliquam porta nibh nulla, et mattis turpis placerat eget. Pellentesque dui diam, pellentesque vel gravida id, accumsan eu magna. Sed a semper arcu, ut dignissim leo.</p>
            <p>Sed vitae lobortis diam, id molestie magna. Aliquam consequat ipsum quis est dictum ultrices. Aenean nibh velit, fringilla in diam id, blandit hendrerit lacus. Donec vehicula rutrum tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt. Aliquam erat volutpat. Vivamus lobortis urna quis gravida semper. In condimentum, est a faucibus luctus, mi dolor cursus mi, id vehicula arcu risus a nibh. Pellentesque blandit sapien lacus, vel vehicula nunc feugiat sit amet.</p>
        </div>
        
        <div class="col-xs-3 col-lg-2" id="myScrollspy" style="z-index: 1000;padding-left: 0;padding-right: 0;float: right;">
            <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
            	<li class="active"><a href="#head">↑</a></li>
                <li class="active"><a href="#section-1">堆山积海</a></li>
                <li><a href="#section-2">有条不紊</a></li>
                <li><a href="#section-3">东搜西罗</a></li>
                <li><a href="#section-4">分享共享</a></li>
                <li><a href="#section-5">娓娓而谈</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
<script>
$('#collapseOne').on('show.bs.collapse', function () {
	$(this).prev().find("span").attr("class","glyphicon glyphicon-minus");
});
$('#collapseOne').on('hide.bs.collapse', function () {
	$(this).prev().find("span").attr("class","glyphicon glyphicon-plus");
});
$('#collapseTwo').on('show.bs.collapse', function () {
	$(this).prev().find("span").attr("class","glyphicon glyphicon-minus");
});
$('#collapseTwo').on('hide.bs.collapse', function () {
	$(this).prev().find("span").attr("class","glyphicon glyphicon-plus");
});
</script>
